<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分享</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        body,html{
            background-color:white;
            height: 950px;
        }
        a{
            text-decoration: none;
        }
        #head,
        #bodynav,
        #main{
            width: 100%;
            margin: 0 auto;
            min-width: 1200px;
        }
        #left{
            height: 800px;
        }
        #big{
            width: 100%;
            min-width: 1250px;
        }
        #shouye{
            width:80%;
            min-width: 1200px;
        }
        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
        }
        #logo {
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left:10px;
        }
        
        #headleft {
            width: 50%;
            float: left;
            height: 80px;
        }
        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }
                /* 注销按钮 */
                #loginName,#unregister{
           display: none;
        }
        #unregister{
            height: 25px;
            width:50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }
        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }
        #login img{
            width:20px;
            height: 80px;
        }
        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            z-index: 5;
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }
        #choose {
            width: 500px;
            display: none;
        }

        #pep {
            list-style: none;
            margin-left:80px;
        }

        #pep dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px; 
            position: relative;
        }

        #pep dd a {
            color: grey;
        }
        /* 健康饮食下拉框 */
        #updown{
            width: 500px;
            display: none;
        }
        #up{
            list-style: none;
            margin-left: 80px;
        }
        #up dd{
            width:100px;
            height: 50px;
            line-height: 50px;
            background-color:  rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }
        #up dd a{
            color:grey;
        }
    #main{
        background-color:#eee;
        height: 900px;
        width: 80%;
        border-radius: 10px;
        border-top-right-radius: 10px;
    }
    #left{
        float: left;
        width: 900px;
        height: 800px;
        border-right:  1px solid black;
    }
    #fenlei{
        width: 900px;
        height: 100px;
        border-right:1px solid black;
    }
    #fenlei h2{
        margin-left: 40px;
        margin-top:30px;
    }
    #fenlei1{
         margin-top:45px; 
         margin-left: 30px;
         height: 30px;
         width: 400px;
    }
    #fenlei a{
        color: black;
        margin-right: 30px;
        text-decoration: none;
        
    }
    #fenxiang{
        position: relative;
        left:600px;
        top:-30px;
        height: 30px;
        width: 300px;
        }
    #fenxiang p{
        margin-left: 100px;
    }
    
    #fenxiang img{
        height: 30px;
        width: 30px;
        cursor:pointer;
        border-radius: 100px;
    }
    li{
        list-style: none;
    }
    #menu{
        padding: 10px;
    }
    #menu li{
        overflow: hidden;
        padding-left: 20px;
        padding-bottom: 20px;
        position: relative;
    }
    #a1{
        width: 200px;
        height: 200px;
    }
    .txt a{
        text-decoration: none;
        width: 630px;
        height: 200px;
    }
    .txt p{
        margin-top: 10px;
        overflow: hidden;
        color: rgb(65, 65, 65);
    }
    #menu li img{
        height: 200px;
        width: 200px;
        float: left;
        border-radius: 20px;
    }
    #jiyudoufutang{
        float: left;
        width: 200px;
        width: 200px;
        overflow: hidden;
        border-radius: 20px;
    }
    #menu li .txt{
        width: 630px;
       
        margin-right: 20px;
        padding-left: 10px;
        height: 200px;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .smallfoot{
        position: relative;
        display: flex;
        height: 20px;
    }
    .writer{
        width: 500px;
        max-width: 600px;
        height: 20px;
    }
    .shoucang{
        margin-left: 200px;
        width: 300px;
        height: 20px;
    }
    .pinglun{
        margin-right: 10px;
        width: 200px;
        height: 20px;
    }
    #right{
        float: right;
        width: 296px;
        height: 800px;
        background-color:#eee;
        border-radius: 10px;
    }
    #paihang{
        margin-top: 130px;
        height: 700px;
        margin-left: 30px;
    }
    #paihang p{
        margin-top: 10px;
        margin-left: 5px;
        font-size: 25px;
        
    }
    #paihang p{
        height: 50px;
    }
    #paihang a{
        color: rgb(65, 65, 65);
    }
    i{
        font-style: italic;
    }
    .like{
        font-size: 66px; color: #ccc; cursor: pointer;
    }
    .cs{
        color: #f00;
    }
    h4{
        color:black;
    }
 /* 底部 */
 #bottom {
            width: 100%;

            /* width: 1423px; */
            height: 150px;
            background-color:rgba(30,30,30,0.4);
        }
        #bottomtext {
            width: 80%;
            height: 150px;
            margin: 0 auto;
        }
        #bottomleft {
            float: left;
            width: 200px;
            height: 150px;
            position: relative;
            top: 10px;

        }
        #bottomrighttext a,#bottomleft span,#bottomrighttext span,#bottomrighttext a{
            color: grey;
        }
        #bottomleft img {
            width: 200px;
            height: 80px;
        }
        #bottomright {
            width: 100%-200px;
            height: 150px;

        }
        #bottomrighttext {
            padding: 30px;
            position: relative;
            top: 40px;
            left: 30px;
        }
        #bottomrighttext a {
            text-decoration: none;
            margin-left: 15px;
        }
    </style>
    <script>
        $(function () {            
            $(".like").click(function () {
                $(this).toggleClass('cs');                
            })
        })
          //导航栏固定
          window.onscroll=function(){
            if(document.documentElement.scrollTop>=80){
                document.getElementById('bodynav').style.position='fixed';
                document.getElementById('bodynav').style.top=0;
                document.getElementById('bodynav').style.left=0;
            }
            else{
                document.getElementById('bodynav').style.position='static';
            }
        }
        //套餐下拉框
        $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })

        //健康饮食下拉框
        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })
                //注销事件
                function unregister(){
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
                    //登录后显示当前用户
                    if(localStorage.getItem('loginName')){
                var links=document.querySelectorAll('#headright a')
                for(var i=0;i<links.length;i++){
                    links[i].style.display='none';
                }
                document.querySelector("#loginName").style.display='inline-block';
                document.querySelector("#unregister").style.display='inline-block';
                document.querySelector('#headright span').style.display="none";
                document.querySelector('#loginName').innerHTML="当前账号："+'<a href="personal.html">'+localStorage.getItem('loginName')+'</a>'
            }

        
    </script>
</head>
<body>
    <div id='big'>
  <div id="head">
            <div id="logo">
                <img src="images/logo1.jpg" alt="" width="200px" height="80px">
            </div>
            <div id="headleft">
                <div id="headleft1">
                    <form action="#">
                        <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                    </form>
                </div>
            </div>
            <div id="headright">
                <a href="login.html" id="login">登录</a>
                <span>|</span>
                <a href="register.html" id="login">注册</a>
                <span id="loginName"></span>
                <button id="unregister" onclick="unregister()">注销</button>
            </div>
        </div>
        <div id="bodynav">
            <div id="nav">
                <ul>
                    <li><a href="shouye.html">首页</a></li>
                    <li id="secondnav"><a href="#">套餐</a>
                        <div id="choose">
                            <dl id="pep">
                                <dd>人数</dd>
                                <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                                <dd><a href="#">4-6人</a></dd>
                                <dd><a href="#">7-8人</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li id="down"><a href="#">健康饮食 </a>
                        <div id="updown">
                            <dl id="up">
                            <dd><a href="">人体群众</a></dd>
                            <dd><a href="laoren.html">老人</a></dd>
                            <dd><a href="">孕妇</a></dd>
                            <dd><a href="">青少年</a></dd>
                            </dl>
                    </div>
                    </li>
    
                    <li><a href="fenxiangjiemian.html">分享圈</a></li>
                    <li><a href="contactus.html">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div id='main'>
            <div id='left'>
                <div id='fenlei'>
                    <h2>分享圈：</h2>
                    <div id='fenlei1'>
                    <!-- <a href="">中国菜</a>
                    <a href="">夜宵</a>
                    <a href="">早餐</a>
                    <a href="">川菜。。</a> -->
                    <div id='fenxiang'>
                        <p>分享：<img class='' src="images/share_qq_active.png" onclick="">
                        <img class="" src="images/share_weibo_active.png" onclick="">
                        <img class="" src="images/share_wx_active.png" onclick=""></p>
                     
                    </div>
                    </div>
                    
                </div>
                <div id='menu'>
                    <li>
                        <a id='a1' href="" title="鲫鱼豆腐汤">
                            <div id='jiyudoufutang'>
                                <img src="images/jydft.jpg" alt='鲫鱼豆腐汤'>

                            </div>
                        </a>
                        <div class="txt">
                            <a href="top1.html">
                                <h4>鲫鱼豆腐汤</h4>
                                <p>锅中倒油，翻入姜片，放入鲫鱼，小火慢煎，煎至金黄后翻面;锅中倒750ml水煮沸，倒入煎好的鱼;加入姜片、葱段、料酒3g、胡椒粉1g、鸡粉5g、盐3g、嫩豆腐250g;大火煮沸转至中火，加盖炖煮15分钟;出锅，完成。</p>
                            </a>
                            <div class='smallfoot'>
                                <div class="writer">
                                    作者：<span>ID</span><span>发布于：</span>
                                    
                                </div>
                           
                            <div class="shoucang">
                                转发：<span>100</span>
                            </div>
                            <div class="pinglun">
                                评论：<span>10</span>
                            </div>
                            <div class="dianzan">
                                赞：<p class="like">&#10084;</p>
                                踩：<button id="btn_cai" onclick="caizan()">0</button>
                            
                                 
                            </div>
                        </div> 
                    </div>
                    </li>
                    <li>
             <a id='a2' href="" title="口水鸡">
             <div id='koushuiji'>
            <img src="images/ksj.jpg" alt='口水鸡'>
            </div>
                        </a>
                        <div class="txt">
                            <a href="top2.html">
                                <h4>口水鸡</h4>
                                <p>准备原料，鸡半只，油炸花生米，蒜子，辣椒油;汤锅内放水，把鸡放入煮制，半只鸡大概煮了15分钟左右，不能确定是否成熟，可以用筷子扎一下肉厚的地方，能扎透，没有血水冒出来就表示成熟了;成熟后，捞出浸泡在冰水中;趁着煮鸡的空档，把花生米去皮，碾碎，葱切葱花，蒜子捣成茸;油辣子中加入适量的蒜茸，盐，糖，味极鲜，香醋拌匀;鸡肉斩成块，摆入盘中;浇上料汁，可以上桌。</p>
                            </a>
                            <div class='smallfoot'>
                                <div class="writer">
                                    作者：<span>ID</span><span>发布于：</span>
                                    
                                </div>
                           
                            <div class="shoucang">
                                转发：<span>100</span>
                            </div>
                            <div class="pinglun">
                                评论：<span>10</span>
                            </div>
                            <div class="dianzan">
                                赞：<p class="like">&#10084;</p>
                                踩：<button id="btn_cai" onclick="caizan()">0</button>
                            
                                 
                            </div>
                        </div> 
                    </div>
                    </li>
                    <li> <li>
                        <a id='a3' href="" title="凉拌皮蛋豆腐">
                        <div id='liangbanpidandoufu'>
                       <img src="images/lbpddf.jpg" alt='凉拌皮蛋豆腐'>
                       </div>
                                   </a>
                                   <div class="txt">
                                       <a href="top3.html">
                                           <h4>凉拌皮蛋豆腐</h4>
                                           <p>先准备好所需要用到的食材，皮蛋剥壳，内酯豆腐（超市有售）取出切块；1个皮蛋切成4等份，依次摆入盘中，切小黄瓜摆盘，大蒜、葱花、青椒、红尖椒切成碎末备用；热锅，待油锅5分热时放入大蒜、姜末翻炒；随后放入青椒红尖椒一同翻炒，翻炒出香味即可；最后放入事先准备好的秘制卤水和20ml的开水调味（按个人口味调配）；将配好的料汁均匀撒在盘子上紧接着将红油淋上，撒些葱花点缀；撒上一些爆香后的白芝麻，整道菜会更加香；一道美味的凉拌皮蛋豆腐就完成啦，放入冰箱里冷冻一下，在酷夏中风味更佳哦。</p>
                                       </a>
                                       <div class='smallfoot'>
                                           <div class="writer">
                                               作者：<span>ID</span><span>发布于：</span>
                                               
                                           </div>
                                      
                                       <div class="shoucang">
                                           转发：<span>100</span>
                                       </div>
                                       <div class="pinglun">
                                           评论：<span>10</span>
                                       </div>
                                       <div class="dianzan">
                                           赞：<p class="like">&#10084;</p>
                                           踩：<button id="btn_cai" onclick="caizan()">0</button>
                                       
                                            
                                       </div>
                                   </div> 
                               </div></li>
                    <li></li>

                </div>
            </div>
            <div id='right'>
                <div id='paihang'>
                    <p>排行榜</p>
                    <div>
                        <p>
                            <i>1</i>
                            <a href="top1.html">夏日营养套餐</a>
                        </p>
                        <p>
                                <i>2</i>
                                <a href="top2.html">夏日至尊套餐</a>
                            </p>
                            <p>
                                    <i>3</i>
                                    <a href="top3.html">夏日缤纷套餐</a>
                                </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <div id="bottomtext">
                <div id="bottomleft">
                    <img src="images/logo1.png" alt=""><br>
                    <span>一年四季，一日三餐</span>
                </div>
                <div id="bottomright">
                    <div id="bottomrighttext">
                        <span>关于恰饭吧</span>
                        <a href="#">网站介绍</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系我们</a>
                        <a href="#">商务合作</a>
                        <a href="#">用户协议</a>
                        <a href="#">隐私政策</a>
                        <a href="#">网站地图</a>
                        <a href="#">友情链接</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div id="bottom">
        <div id="bottomtext">
            <div id="bottomleft">
                <img src="images/logo1.png" alt=""><br>
                <span>一年四季，一日三餐</span>
            </div>
            <div id="bottomright">
                <div id="bottomrighttext">
                    <span>关于恰饭吧</span>
                    <a href="#">网站介绍</a>
                    <a href="#">加入我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">商务合作</a>
                    <a href="#">用户协议</a>
                    <a href="#">隐私政策</a>
                    <a href="#">网站地图</a>
                    <a href="#">友情链接</a>
                </div>
            </div>
        </div>
    </div> -->
</body>
</html>